<template>
    <div class="box">
        <el-container>
            <el-header>
                <el-row :gutter="20" class="inputBox">
                    <el-col :span="3"></el-col>
                    <el-col :span="12">
                        <el-input v-model="input" placeholder="请输入查询信息" />
                    </el-col>
                    <el-col :span="4">
                        <div class="submite" @click="submite()">搜索</div>
                    </el-col>
                </el-row>
            </el-header>
            <el-main>
                <el-row :gutter="20" class="videoBox">
                    <el-col :span="8" v-for="info,index in infos" class="videoWrap">
                        <meteringItem
                        :name="info.name"
                        :preinstallName="info.preinstallName"
                        :standBookCode="info.standBookCode"
                        :price="info.price"
                        :startTime="info.startTime"
                        :usageTime="info.usageTime"
                        :statusName="info.statusName"
                        :propertyTypeName="info.propertyTypeName"
                        ></meteringItem>
                    </el-col>
                </el-row>
                <div >
                    <el-pagination 
                        small
                        background
                        layout="total,prev, pager, next"
                        :total="output.total"
                        @current-change="handleCurrentChange"
                        class="pagination"
                    />
                </div>
            </el-main>
        </el-container>
    </div>
</template>
<script setup>
import { ref , onMounted} from "vue";

import meteringItem from "./meteringItem.vue";
import { pagequery } from '@/axios/index'
import { ElMessage } from 'element-plus';
import emitter from "@/mitt/index.js";
import { LayerEvent } from "@/mitt/LayerEventType";
import { store } from "@/store/config.js"

let input = ref();
let output = ref({
    total:0,
});

let params = ref({
    "start": "",
    "sort": "",
    "order": "",
    "param": {
      "type": "metering",
      "name":""
    },
    "length": 9
  });


let infos = ref([])

// createrInfo();
function createrInfo()
{
    for (let index = 0; index < 8; index++) {
        infos.value.push({
            "id": Math.random(),
            "name": "777",
            "code": "RE",
            "preinstallName": "特种设备",
            "statusName": "正常",
            "startTime": "2023-01-01 00:00:00",
            "price": "77",
            "usageTime": "2024-01-23 00:00:00",
            "propertyTypeName": "资产"
        })
    }
}


onMounted(()=>{
    getData();
})



emitter.on(LayerEvent.ShowLayer,(layerName) => {
    if(layerName == "metering")
    {
        getData();
    }
})




function getData()
{
    pagequery(params.value,(res)=>{
        if(res.pageList.data.length == 0)
        {
            ElMessage({
                message: '暂无数据',
                type: 'warning'
            })
            store.commit("setDialogTableStatus",false);
            return;
        }
        infos.value.length = 0;
        infos.value.push(...res.pageList.data);
        output.value.total = res.pageList.total;
    });
}




function submite()
{
    params.value.param.name = input.value;
    getData();
}



function handleCurrentChange(val)
{
    params.value.param.start = val;
    getData();
}

</script>

<style lang="less" scoped>
    .box{
        // width: 340px;
        line-height: 40px;
        .inputBox{
            height: 40px;
            line-height: 40px;
            .el-input__inner{
                height: 40px;
                line-height: 40px;
                border: 1px solid #03d2ec;
                background: #1d243283;
            }

            .submite{
                height: 42px;
                line-height: 42px;
                letter-spacing: 10px;
                padding: 0px 5px;
                text-align: center;
                color: #03d2ec;
                background-color: #224358ad;
                border: 1px solid #03d2ec;
                box-sizing: content-box;
                font-size: 16px;
            }
        }
        .videoBox{
            .videoWrap{
                position: relative;
                background: url("/images/videoBox.png") no-repeat;
                background-size: 98% 98%;
                background-position: center center;
                margin: 5px 0px;
            }
            video{
                width: 100%;
                height: auto;
                margin: auto;
                margin-top: 15px;
            }
            p{
                color: white;
                background-color: rgba(0, 0, 0, 0.7);
                text-align: center;
                position: absolute;
                width: 93%;
                margin-left: 0%;
                bottom: 16px;
                height: 30px;
                line-height: 30px;
                overflow: hidden;        /*内容会被修剪，并且其余内容是不可见的*/
                text-overflow:ellipsis;  /*显示省略符号来代表被修剪的文本。*/
                white-space: nowrap; 
                font-size: 12px;
            }
        }
        .pagination{
          float: right;
          margin-top: 20px;
        }
       
    }


</style>